<nz-card [nzTitle]="titleTemplate">
  <nz-empty *ngIf="threshold.datasource === null; else monitorProcessorHasValue"
            [nzNotFoundContent]="contentTemplate"
            [nzNotFoundFooter]="footerTemplate">
    <ng-template #contentTemplate>
    </ng-template>
    <ng-template #footerTemplate>
    </ng-template>
  </nz-empty>
  <ng-template #monitorProcessorHasValue>
    <nz-skeleton *ngIf="loading.button; else loadChart" nzActive="true"></nz-skeleton>
    <ng-template #loadChart>
      <app-component-charts-line [config]="chartsConfig"></app-component-charts-line>
    </ng-template>
  </ng-template>
</nz-card>
<nz-card style="margin-top: 10px;" nzTitle="{{'common.detail'|translate}}">
  <nz-skeleton *ngIf="loading.button; else monitorProcessorLoadSuccess" nzActive="true"></nz-skeleton>
  <ng-template #monitorProcessorLoadSuccess>
    <nz-empty *ngIf="processors?.columns.length <= 0; else monitorProcessorHasTableValue"
              [nzNotFoundContent]="contentTemplate"
              [nzNotFoundFooter]="footerTemplate">
      <ng-template #contentTemplate>
      </ng-template>
      <ng-template #footerTemplate>
      </ng-template>
    </nz-empty>
    <ng-template #monitorProcessorHasTableValue>
      <nz-table #basicTable [nzData]="processors.columns" [nzScroll]="{x: handlerAnalysisWidth() + 'px'}"
                nzSize="small">
        <thead>
        <tr>
          <th *ngFor="let header of handlerFilterHeader(processors.headers)" nzEllipsis>
            <div nz-popover nzPopoverTrigger="click"
                 nzPopoverContent="{{header?.name}}">
              {{header?.name}}
            </div>
          </th>
          <th nzEllipsis>{{'common.action' | translate}}</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let column of basicTable.data">
          <td *ngFor="let header of handlerFilterHeader(processors.headers)" nzEllipsis>
            <div nz-popover nzPopoverTrigger="click"
                 nzPopoverTitle="{{header.name}}" nzPopoverContent="{{column[header.name]}}">
              {{column[header.name]}}
            </div>
          </td>
          <td>
            <button nz-button nzShape="circle" nzSize="small" nzType="primary"
                    nz-tooltip nzTooltipTitle="{{'common.ddl' | translate}}"
                    (click)="handlerShowModal(column, 'ddl')">
              <i class="fa fa-search"></i>
            </button>
            <button nz-button nzShape="circle" nzSize="small" nzDanger nzType="primary"
                    nz-tooltip nzTooltipTitle="{{'common.stop' | translate}}" (click)="handlerShowModal(column)">
              <i class="fa fa-stop-circle"></i>
            </button>
          </td>
        </tr>
        </tbody>
      </nz-table>
    </ng-template>
  </ng-template>
</nz-card>
<ng-template #titleTemplate>
  <nz-select [(ngModel)]="threshold.datasource" nzShowSearch nzAllowClear nzSize="small"
             (ngModelChange)="handlerSwitch()"
             style="width: 150px; margin-right: 8px;">
    <nz-option *ngFor="let detail of dataSources" [nzDisabled]="!detail.status"
               nzValue="{{detail.alias}}" nzLabel="{{detail.alias}}"></nz-option>
  </nz-select>
  <nz-switch style="float: right; margin-left: 10px;" [(ngModel)]="threshold.active"
             nzCheckedChildren="{{'common.open'|translate}}"
             nzUnCheckedChildren="{{'common.close'|translate}}"
             [nzDisabled]="threshold.datasource === null"
             (ngModelChange)="handlerAuto()">
  </nz-switch>
  <nz-input-number style="float: right;" [(ngModel)]="threshold.ranger" [nzMin]="1" [nzMax]="100" [nzStep]="1"
                   [nzDisabled]="threshold.active">
  </nz-input-number>
</ng-template>
<app-component-ddl-query [visible]="disabled.dialog" [text]="queryDDL"
                         (emitter)="handlerCloseModal('ddl')">
</app-component-ddl-query>

<nz-modal *ngIf="currentProcessor" [(nzVisible)]="dialog.stop"
          nzTitle="{{'common.stop'|translate}} {{this.currentProcessor.id}}"
          [nzMaskClosable]="false"
          (nzOnCancel)="handlerCloseModal()">
  <ng-container *nzModalContent>
    <form nz-form>
      <nz-form-item>
        <nz-form-control [nzSpan]="24">
          <nz-alert nzBanner nzMessage="{{'alert.stop_it'|translate}}">
          </nz-alert>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-control [nzSpan]="24">
          <nz-tag [nzColor]="'#f50'">{{'common.no_rollback'|translate}}</nz-tag>
          {{'alert.stop_it_result'|translate}}
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-control [nzSpan]="24">
          <nz-input-group [nzAddOnBefore]="addOnBefore" [nzAddOnAfter]="suffixButton">
            <input type="text" name="inputValue" nz-input [(ngModel)]="inputValue" (change)="handlerValidate()"/>
          </nz-input-group>
          <ng-template #addOnBefore>
            <button nz-button nzDanger nzType="link"
                    nz-tooltip="{{currentProcessor.id}}"
                    ellipsis [ellipsis-content]="currentProcessor.id"
                    style="width: 120px;">
            </button>
          </ng-template>
          <ng-template #suffixButton>
            <button nz-button nzType="link" (click)="handlerQuicklyEnter()">{{'common.quicklyEnter'|translate}}</button>
          </ng-template>
        </nz-form-control>
      </nz-form-item>
    </form>
  </ng-container>
  <div *nzModalFooter>
    <button nz-button nzType="primary" nzDanger [disabled]="disabled.button"
            (click)="handlerStop()" [nzLoading]="stopLoading">
      {{'common.stop'|translate}}
    </button>
  </div>
</nz-modal>
